<template>
	<view class="news-info d-f j-c-b" @click="toNewsDetailPage(newsInfo)">
		<view class="news-left d-f f-d-c j-c-b">
			<view class="news-head">
				<view class="news-title t-o-e-2">{{newsInfo.title}}</view>
				<!-- <view class="news-subtitle t-o-e">{{newsInfo.description}}</view> -->
			</view>
			<view class="news-foot d-f a-i-c j-c-e">
				<view class="user-num">
					<view class="number">{{newsInfo.created_at | parseTime}}</view>
				</view>
				<!-- <view class="user-num">
					<view class="slw-icon num-icon">&#xe73c;</view>
					<view class="number">{{1643}}</view>
				</view>
				<view class="user-num">
					<view class="slw-icon num-icon">&#xe6e3;</view>
					<view class="number">{{0}}</view>
				</view>
				<view class="user-num">
					<view class="slw-icon num-icon">&#xe730;</view>
					<view class="number">{{0}}</view>
				</view> -->
			</view>
		</view>
		<view class="news-right" v-if="newsInfo.cover!=''">
			<image :src="newsInfo.cover" class="news-img"/>
		</view>
	</view>
</template>

<script>
	import {toNewsDetailPage} from '@/utils/PageRouter.js'
	export default {
		name: 'NewsOne',
		props: {
			newsInfo: {
				type: Object,
				default: function () {
					return {}
				}
			}
		},
		methods: {
			toNewsDetailPage (info) {
				toNewsDetailPage(info, false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.news-info{
		.news-left{
			// width: calc(100% - 320rpx);
			width: 100%;
			.news-head{
				width: 100%;
				.news-title{
					color: #333;
					font-size: 30rpx;
					font-weight: bold;
				}
				.news-subtitle{
					color: #999;
					font-size: 24rpx;
				}
			}
			.news-foot{
				.user-num{
					display: flex;
					align-items: center;
					min-width: 128rpx;
					.num-icon{
						color: #ddd;
						font-size: 24rpx;
					}
					.number{
						color: #666;
						font-size: 24rpx;
						margin-left: 10rpx;
					}
				}
			}
		}
		.news-right{
			display: flex;
			flex: 1;
			padding-left: 20rpx;
			.news-img{
				// width: 300rpx;
				// height: 192rpx;
				width: 320rpx;
				// width: 250;
				height: 160rpx;
				border-radius: 12rpx;
			}
		}
	}
</style>
